<template>
	<div>
		<city-header></city-header>
		<city-search :cities="cities"></city-search>
		<city-list 
					:cities="cities" 
					:hot="hotCities" 
					:letter="letter"
		>
		</city-list>
		<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
	</div>
</template>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/search'
import CityList from './components/list'
import CityAlphabet from './components/Alphabet'
import axios from 'axios'
export default{
	name:'City',
	components:{
		CityHeader:CityHeader,
		CitySearch:CitySearch,
		CityList:CityList,
		CityAlphabet:CityAlphabet
	},
	data:function(){
		return {
			cities:{},
			hotCities:[],
			letter:''
		}
	},
	methods: {
	  	getCityInfo(){
	  		axios.get('/api/city.json')
	  		.then(this.handleGetCityInfoSucc)
	  	},
	  	handleGetCityInfoSucc (res){
	  		res = res.data
	  		if(res.ret&&res.data){
	  			const data = res.data
	  			this.cities = data.cities
	  			this.hotCities = data.hotCities
	  		}
	  	},
	  	handleLetterChange:function(letter){
	  		this.letter = letter
	  	}

  },
  mounted(){
  	this.getCityInfo();
  }
}
</script>

<style lang="stylus" scoped>
	
</style>
